<template>
  <a-modal title-align="start" title="打包" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <div class="common-text">
      <span>请选择与</span>
      <span style="color: black">{{ nodeTextMap[nodeItem.contentType] }}</span>
      <span> 一起设置打包价格的任务节点</span>
    </div>
    <div class="mt10 flex-c">
      <span class="required label-span">任务节点：</span>
      <a-checkbox class="mr10" v-for="(item, index) of newObj.subNodeList" :key="index" v-model="item.isGroup">{{ nodeTextMap[item.contentType] }}</a-checkbox>
    </div>
    <div class="mt10 flex-c">
      <span class="label-span" style="padding-left: 8px">打包金额：</span>
      <a-input v-model="newObj.groupPrice" placeholder="请输入" allow-clear>
        <template #prefix>￥</template>
      </a-input>
    </div>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue'
  import { taskTypeAndNode, nodeTextMap } from '../../taskMap'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps(['modelValue', 'nodeItem'])
  const emits = defineEmits(['save', 'update:modelValue'])
  const showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  const newObj = ref<any>({})

  onMounted(() => {
    newObj.value = props.nodeItem
  })

  const submit = () => {
    let selList = newObj.value.subNodeList.filter((item: any) => item.isGroup)
    if (!selList[0]) return Message.error('请选择要打包的任务节点')
    emits('save', newObj.value)
    showvisible.value = false
  }
</script>

<style lang="less" scoped>
  .label-span {
    display: inline-block;
    width: 100px;
  }
</style>
